
<template>
  <!-- 1.41 创建按钮组件文件  -->
  <!-- 1.49 添加监听事件接收数据 -->
  <input
    class="myinput"
    type="text"
    @input="handler_inp"
    :[border_color]="{ success: flag, error: !flag }"
    @blur="handlerblur"
    v-model="name"
  />
</template>

<script>
export default {
  /* 1.48.1 添加监听父组件的type值事项不同的样式   */
  props: {
    rules: {
      //1.48.2 设定type的属性
      //RegExp: 正则表达式的类型
      type: RegExp,
    },
    //2,32 msg值的要求
    msg: {
      type: String,
      default: "输入数据有误", //默认值
    },
  },
  methods: {
    //1.49.1 定义事件函数
    handler_inp(e) {
      // console.log(e);
      // console.log(e.target);  //父组件中的输入框字节
      let a = e.target.value;
      // console.log(a);  //输入的值
      //1.49.2 判断是否输入正则规则
      if (this.rules) {
        //1.49.3 验证正则验证是否正确
        //test: 正则的验证方法,得到布尔值
        if (this.rules.test(a)) {
          /*2.13.2 使用toast   */
          this.flag = true;
        } else {
          this.flag = false;
        }
      }
        this.$emit("input", a);
    },
    /* 2.12 添加输入框失焦事件
    处理事件函数,失焦后验证用户数据,及时给出相应的提示 */
    handlerblur(e) {
      this.border_color = "class";
      if (this.rules) {
        let a = e.target.value;
        if (!this.rules.test(a) && this.onoff) {
          //输入框的值,没发生改变时不进行重复显示
          /*2.23.2 使用toast   */
          this.$toast({
            //2.33 添加动态的显示内容
            message: this.msg, //信息文本内容
            duration: 0.1, //提示框显示时间
            position: "top", //提示框显示位置
          });
          this.onoff = false;
        }
      }
    },
  },
  data() {
    return {
      flag: true,
      border_color: "",
      onoff: false,
      name: "",
    };
  },
  watch: {
    name(n, o) {
      // console.log(n, o);
      if (n == o) {
        this.onoff = false;
      } else {
        this.onoff = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/* 1.42 添加按钮样式 */
.myinput {
  width: 318 * 100vw/360;
  height: 40px;
  outline: none;
  border: none;
  border-bottom: 1px solid #999;
  font-size: 20px;
  line-height: 40px;
}
.success {
  border-bottom-color: green;
}
.error {
  border-bottom-color: red;
  color: red;
}
</style>